<template>
  <view>
    <view class="high_img">
      <swiper-action @swiperAction="handleSwiperAction">
        <image mode="widthFix" :src="imgDetail.thumb"></image>
      </swiper-action>
    </view>

    <!-- 点赞收藏 -->
    <view class="user_rank">
      <view class="rank">
        <text class="iconfont icondianzan">{{ imgDetail.rank }}</text>
      </view>
      <view class="collect">
        <text class="iconfont iconshoucang">{{ imgDetail.favs }}</text>
      </view>
    </view>

    <!-- 标签时间 -->
    <view class="img_info">
      <view class="img_tag" v-if="tag.length !== []">
        <uni-tag v-for="(item, i) in imgDetail.tag" :key="i" :text="item" size="small" type="default" circle></uni-tag>
      </view>
      <view class="img_time">{{ imgTime }}</view>
    </view>

    <!-- 下载 -->
    <view class="download">
      <view class="download_btn" @click="downloadImg">开始下载</view>
    </view>
  </view>
</template>

<script>
import moment from "moment";
moment.locale("zh-cn");
import swiperAction from "../../components/swiperAction.vue";
import { uniTag } from "@dcloudio/uni-ui";

export default {
  data() {
    return {
      imgDetail: {},
      total: 0,
      imgIndex: 0,
    };
  },
  components: {
    uniTag,
    swiperAction,
  },
  onLoad() {
    const { imgIndex } = getApp().globalData;
    this.imgIndex = imgIndex;
    this.getData();
  },
  computed: {
    imgTime() {
      return moment(this.imgDetail.atime * 1000).fromNow();
    },
  },
  methods: {
    //   获取数据
    getData() {
      const { imgList } = getApp().globalData;
      this.imgDetail = imgList[this.imgIndex];
      this.total = imgList.length;
    },
    // 滑动操作
    handleSwiperAction(e) {
      console.log(e);
      if (e.directer === "left" && this.imgIndex < this.total - 1) {
        this.imgIndex++;
        this.getData();
      } else if (e.directer === "right" && this.imgIndex > 1) {
        this.imgIndex--;
        this.getData();
      } else {
        uni.showToast({
          title: "没有更多了",
          icon: "none",
        });
      }
    },
    // 下载
    async downloadImg() {
      await uni.showLoading({ title: "下载中" });
      const result1 = await uni.downloadFile({ url: this.imgDetail.img });
      console.log(result1);
      const { tempFilePath } = result1[1];
      const result2 = await uni.saveImageToPhotosAlbum({ filePath: tempFilePath });
      console.log(result2);
      uni.hideToast();
      if (result2.length === 2) {
        await uni.showToast({
          title: "下载成功",
        });
      } else {
        await uni.showToast({
          title: "下载失败",
          icon: "error",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.user_rank {
  display: flex;
  justify-content: space-around;
  height: 80rpx;
  border-bottom: 1px solid #eee;
  border-top: 1px solid #eee;
  .rank {
    display: flex;
    justify-content: center;
    align-items: center;
    text {
      padding-left: 10rpx;
    }
  }

  .collect {
    display: flex;
    justify-content: center;
    align-items: center;
    text {
      padding-left: 10rpx;
    }
  }
}
.img_info {
  display: flex;
  justify-content: space-between;
  padding: 15rpx;
}
.download {
  position: fixed;
  bottom: 60rpx;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  .download_btn {
    width: 95%;
    height: 80rpx;
    font-size: 32rpx;
    font-weight: 700;
    line-height: 80rpx;
    color: #fff;
    background-color: $color;
    border-radius: 10rpx;
    text-align: center;
  }
}
</style>
